import React from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    Image
} from 'react-native';
import Constants from '../../utils/Constants';
import Header from '../../widgets/Header';
import {AppModal} from '../../widgets/modal';
import RequestUtil from '../../utils/RequestUtil';
import Api from '../../utils/Api';
import screen from '../../utils/screen';
import Images from '../../images/Images';
import {cutZero, numAdd} from '../../utils/common';




export default class OrderDetail extends React.Component{


    constructor(props){
        super(props)
    }

    state={
        data:null
    }

    componentDidMount() {
        const { id } = this.props.navigation.state.params;
        if(id){
            this.orderId = id
            this.getData(id)
        }
    }

    getData(id){
        AppModal.showLoading()
        RequestUtil.get(Api.taskOrder + `/${id}`).then(res=>{
            let data = res.data
            console.log('order detail',data)

            this.setState({
                data:data
            })


            AppModal.hideTip();
        },error=>{
            AppModal.showError(error.msg)
        })
    }

    renderRow(title,rightText){
        return (
            <View style={{width:'100%',flexDirection:'row',alignItems: 'center',justifyContent: 'space-between',
                marginTop:screen.PIXEL_40
            }}>
                <Text style={{color:'#000',fontSize:13}}>{title}</Text>
                <Text style={{color:'#D85700',fontSize:13}}>{rightText}</Text>

            </View>
        )
    }

    render(){
        const {data} = this.state
        return (
            <View style={styles.container}>
                <Header title={Constants.order.order_detail} navigation={this.props.navigation}/>

                {
                    data && (
                        <ScrollView>
                            <View style={{width:screen.width,alignItems:'center'}}>
                                <Image source={{uri:data.icon}}
                                       resizeMode={'contain'}
                                       style={{width:screen.scaleSize(387),height:screen.scaleSize(443)}}
                                />
                            </View>


                            <View
                                style={{width:screen.width,backgroundColor:'#fff',
                                    borderTopLeftRadius: screen.PIXEL_80,
                                    borderTopRightRadius:screen.PIXEL_80,
                                    alignItems:'center',
                                    padding:screen.PIXEL_50,
                                    minHeight:screen.height - screen.scaleSize(443)
                                }}
                            >
                                <Text style={{fontSize:19,color:'#000',fontWeight:'bold'}}>{data.title}</Text>
                                <Text style={{fontSize:13,color:'#FF7B14',fontWeight:'bold',marginTop:screen.PIXEL_10}}>from {data.from}</Text>
                                {this.renderRow(Constants.order.detail_amount,Constants.appsymbol + ' '+ cutZero(data.deposit))}
                                {this.renderRow(Constants.order.detail_commission,Constants.appsymbol + ' '+cutZero(data.reward))}
                                {this.renderRow(Constants.order.detail_return,Constants.appsymbol + ' '+numAdd(cutZero(data.deposit), cutZero(data.reward) )  )}
                                {this.renderRow(Constants.order.detail_order_num, data.id  )}
                                {this.renderRow(Constants.order.detail_grabbed_on, data.receive_time  )}
                                {this.renderRow(Constants.order.detail_last_update, data.update_time  )}
                            </View>
                        </ScrollView>
                    )
                }


            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'#E2FDFF'
    },
})
